<template>
  <el-radio-group v-model="radio" @change="change">
    <div class="radio-box">
      <el-radio :disabled="dis" :label="1">{{title}}，运行通配符[{{reg}}]</el-radio>
    </div>
    <template v-if="title !== '周'">
      <div class="radio-box">
        <el-radio  :disabled="dis" :label="2">
          周期 
          从 
          <el-input-number @change="change" :disabled="radio !== 2" v-model="num" :min="rule.min" :max="rule.max" label="描述文字"></el-input-number> 
          到 
          <el-input-number @change="change" :disabled="radio !== 2" v-model="num2" :min="num+1" :max="rule.max" label="描述文字"></el-input-number>
          {{title}}
        </el-radio>
      </div>
      <div class="radio-box">
        <el-radio  :disabled="dis" :label="3">
          从 
          <el-input-number  @change="change" :disabled="radio !== 3" v-model="num3" :min="rule.min" :max="rule.max" label="描述文字"></el-input-number> 
          {{title}}开始，每 
          <el-input-number  @change="change" :disabled="radio !== 3" v-model="num4" :min="title === '年' ? 1 : rule.min" :max="title === '年' ? 100 : rule.max" label="描述文字"></el-input-number>
          {{title}}执行一次
        </el-radio>
      </div>
    </template>
    <template v-else>
      <div class="radio-box">
        <el-radio  :disabled="dis" :label="2">
          周期 
          从周 
          <el-input-number @change="change" :disabled="radio !== 2" v-model="num" :min="rule.min" :max="rule.max" label="描述文字"></el-input-number> 
          到周
          <el-input-number @change="change" :disabled="radio !== 2" v-model="num2" :min="num+1" :max="rule.max" label="描述文字"></el-input-number>
        </el-radio>
      </div>
      <div class="radio-box">
        <el-radio  :disabled="dis" :label="3">
          第
          <el-input-number  @change="change" :disabled="radio !== 3" v-model="num3" :min="rule.min" :max="7" label="描述文字"></el-input-number> 
          周的，周
          <el-input-number  @change="change" :disabled="radio !== 3" v-model="num4" :min="1" :max="7" label="描述文字"></el-input-number>
          执行
        </el-radio>
      </div>
      <div class="radio-box">
        <el-radio  :disabled="dis" :label="6">
          本月最后一个，周
          <el-input-number  @change="change" :disabled="radio !== 6" v-model="num6" :min="1" :max="7" label="描述文字"></el-input-number> 
        </el-radio>
      </div>
    </template>
    <div class="radio-box">
      <el-radio  :disabled="dis" :label="4">
        指定
        <el-select  @change="change" :disabled="radio !== 4" v-model="value1" multiple placeholder="可多选">
          <el-option
            v-for="n in getSelectData"
            :key="n"
            :label="title === '周'  ? title + (n == 7 ? '日' : n) : '第'+n+title"
            :value="n">
          </el-option>
        </el-select>
      </el-radio>
    </div>
    <template v-if="title === '日'">
      <div class="radio-box">
        <div class="radio-box">
          <el-radio :disabled="dis" :label="7">本月最后一天</el-radio>
        </div>
        <div class="radio-box">
          <el-radio :disabled="dis" :label="8">本月最后一个工作日</el-radio>
        </div>
        <el-radio  :disabled="dis" :label="9">
          本月
          <el-input-number  @change="change" :disabled="radio !== 9" v-model="num9" :min="1" :max="31" label="描述文字"></el-input-number> 
          号最近的那个工作日
        </el-radio>
      </div>
    </template>
    <div class="radio-box">
      <el-radio :disabled="dis" :label="5" v-if="type==='d' || type==='w'">不指定</el-radio>
    </div>
  </el-radio-group>
</template>

<script>
function create_data (bool) {
  console.log(bool);
  return {
    radio: bool ? 5 : 1,
    num: 1,
    num2: 1,
    num3: 0,
    num4: 1,
    num6: 1,
    num9: 1,
    value1: []
  }
}
  export default {
    data() {
      return {
        radio: 1,
        num: 1,
        num2: 1,
        num3: 0,
        num4: 1,
        num6: 1,
        num9: 1,
        value1: []
      }
    },
    computed: {
      getSelectData() {
        const {min , max} = this.rule;
        const _data = [];
        for(let i = min; i < max; i++) {
          _data.push(i)
        }
        return _data;
      },
      getType() {
        return this.type
      }
    },
    created() {
      this.reset()
    },
    props: {
      dis: {
        type: Boolean,
        default: false
      },
      rule: {
        type: Object,
        default() {
          return {}
        }
      },
      reg: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      }
    },
    methods: {
      reset() {
        const _obj = create_data(this.getType=='w');
        for (const key in _obj) {
         this[key] = _obj[key] 
        }
      },
      change() {
        let value;
        if (this.radio === 1) {
          value = '*'
        } else if (this.radio === 2) {
          value = `${this.num}-${this.num2}`
        } else if (this.radio === 3) {
          if (this.getType === 'w') value = `${this.num3}#${this.num4}`
          else value = `${this.num3}/${this.num4}`
        } else if (this.radio === 4) {
          value = this.value1.join(',')
        } else if (this.radio === 5) {
          value = '?'
        } else if (this.radio === 6) {
          value = `${this.num6}L`
        } else if (this.radio === 7) {
          value = `L`
        } else if (this.radio === 8) {
          value = `LW`
        } else if (this.radio === 9) {
          value = `${this.num9}W`
        }
        this.$emit('change', {type: this. getType, value: value ? value : '*'});
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-radio-group{
    width: 100%;
  }
  .radio-box{
    width: 100%;
    padding: 15px 0;
  }
  .el-select{
    width: 400px;
  }
</style>